﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="Hui-article-box">
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span>房源管理
        <span class="c-gray en">&gt;</span>合租管理
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="Hui-article">
        <article class="cl pd-20">
            <div class="text-c">
                <input type="text" class="input-text" style="width:250px" placeholder="输入小区名称" id="pname" name="">
                <button type="submit" class="btn btn-success" id="btn_Search" name=""><i class="Hui-iconfont">&#xe665;</i> 搜小区</button>
            </div>
            <div class="cl pd-5 bg-1 bk-gray mt-20">
                <span class="l">
                    <a href="javascript:;" id="deleteBatch" class="btn btn-danger radius">
                        <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                    </a>
                    <a href="javascript:;" class="btn btn-primary radius" id="btn_Add">
                        <i class="Hui-iconfont">&#xe600;</i> 添加房源
                    </a>
                </span>
            </div>
            <table class="table table-border table-bordered table-bg" id="table">
                <thead>
                    <tr>
                        <th scope="col" colspan="9">房源列表</th>
                    </tr>
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" value="" id="checkall"></th>
                        <th width="40">区域</th>
                        <th width="40">小区名</th>
                        <th width="40">地址</th>
                        <th width="40">租金</th>
                        <th width="40">房型</th>
                        <th width="40">装修</th>
                        <th width="40">面积(m²)</th>
                        <th width="70">操作</th>
                    </tr>
                </thead>
            </table>
        </article>
    </div>
</section>

@section footScript{
    <script type="text/javascript">
        $(function () {
            //设置导航栏选中样式
            $("#House").parent().parent().prev().addClass("selected");
            $("#House").parent().parent().css("display", "block");
            $("#House").addClass("current");

            getData();
        })

        //获取分页数据,通过datatalbe渲染列表
        var table;
        function getData() {
            var params = {};
            table = $("#table").DataTable({
                lengthChange:true,//是否显示每页大小的下拉框
                info: true, //是否显示页数信息
                processing: true, //显示加载中提示....
                ordering: false,//是否排序
                searching: false,//是否显示默认的搜索
                paging: true,//是否显示分页
                serverSide: true,//开启服务器模式,通过ajax从服务器获取数据

                //设置特定列的初始化属性
                columns: [
                    { data: '' },//设置单元格里的值
                    { data: 'RegionName' },
                    { data: 'CommunityName' },
                    { data: 'Address' },
                    { data: 'MonthRent' },
                    { data: 'RoomTypeName' },
                    { data: 'DecorateStatus' },
                    { data: 'Area' },
                    {
                        data: 'Id',
                        render: function (data, type, full, callback) {
                            return ('<a title="编辑" href="javascript:;" data-id=' + data + ' class="ml-5 edit"  style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="上传" href="javascript:;" data-id=' + data + ' class="ml-5 upload"  style="text-decoration:none"><i class="Hui-iconfont">&#xe642;</i></a><a title="查看图片" href="javascript:;" data-id=' + data + ' class="ml-5 picture"  style="text-decoration:none"><i class="Hui-iconfont">&#xe646;</i></a> <a title="删除"  href="javascript:;"  data-id=' + data + ' class="ml-5 delete" style="text-decoration:none"> <i class="Hui-iconfont">&#xe6e2;</i></a>   ')
                        }
                    }
                ],

                //自定义列
                columnDefs: [{
                    targets: 0,//列的索引，从0开始
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" value="' + row.Id + '" name="selectIDs">';
                    }
                }],

                //添加回调函数
                createdRow: function (row, data, index) {
                    /* 设置表格中的内容居中 */
                    $('td', row).attr("class", "text-c");//在row这个元素里面查找td,并添加样式
                },

                //使用ajax异步请求
                ajax: {
                    type: 'POST',
                    url: '@Url.Action("GetList", "House")',
                    //发送给服务器的数据
                    data: function (d) {
                        console.log(d)
                        params.start = d.start;//开始的序号
                        params.length = d.length;//要取的数据的条数
                        params.name = $("#pname").val();//输入的关键字
                        return params;//自定义需要传递的参数。
                    }
                }
            });
        }

        //搜索
        $("#btn_Search").click(function () {
            //使datatable重新请求
            table.ajax.reload();
        })
        //添加
        $("#btn_Add").click(function () {
            layer_show("添加房源", "@Url.Action("Add", "House")?id=0", 1200, 800);
        })
        //上传图片
        $(".upload").livequery("click", function () {
           //获取当前选中的id值
            var id = $(this).attr("data-id");
            console.log(id);
            layer_show("上传图片", "@Url.Action("UploadPicView", "House")?houseId=" + id, 1000, 600);
        })
        //查看图片
        $(".picture").livequery("click", function () {
           //获取当前选中的id值
            var id = $(this).attr("data-id");
            console.log(id);
            layer_show("查看图片", "@Url.Action("LookPicture", "House")?lookid=" + id, 1000, 600);
        })


         //删除
        $('.delete').livequery('click', function () {
            var id = $(this).attr("data-id");
            layer.confirm('确认删除该条数据?', { icon: 3, title: '提示' }, function (index) {
                $.post("@Url.Action("Delete", "House")", { id: id }, function (data) {
                    if (data.State == 1) {
                        location.reload();
                    }
                    else {
                        layer.msg(data.ErrorMessage, { icon: 2 });
                    }
                })
            });
        });
        //批量删除
        $('#deleteBatch').click(function () {
            var ids = [];
            $(":checkbox[name='selectIDs']:checked").each(function () {
                var id = $(this).val();
                ids.push(id);
            })
            if (ids.length == 0) {
                layer.msg("请选择要删除的项");
                return;
            }
            layer.confirm('确认是否删除?', { icon: 3, title: '提示' }, function () {
                $.post("@Url.Action("DeleteBatch", "House")", { ids: ids }, function (data) {
                    if (data.State == 1) {
                        location.reload();
                    }
                    else {
                        layer.msg(data.ErrorMessage, { icon: 2 });
                    }
                })
            });
        })
    </script>
}

